<template>
  <div class="home-container">
    <!-- 侧边栏 -->
    <aside class="sidebar">
      <div class="sidebar-header">
        <h3>轻客管家</h3>
      </div>
      <el-menu
        :default-active="activeMenu"
        class="el-menu-vertical"
        router
        background-color="#001529"
        text-color="#fff"
        active-text-color="#ffd04b"
        :collapse-transition="false"
        unique-opened
      >
        <!-- 首页 -->
        <el-menu-item index="/dashboard">
          <el-icon><HomeFilled /></el-icon>
          <span>首页</span>
        </el-menu-item>

        <!-- 线索管理 -->
        <el-sub-menu index="2">
          <template #title>
            <el-icon><Collection /></el-icon>
            <span>线索管理</span>
          </template>
          <el-menu-item index="/lead-list">
            <span>线索列表</span>
          </el-menu-item>
          <el-menu-item index="/lead-pool">
            <span>线索池</span>
          </el-menu-item>
        </el-sub-menu>

        <!-- 商机管理 -->
        <el-sub-menu index="3">
          <template #title>
            <el-icon><TrendCharts /></el-icon>
            <span>商机管理</span>
          </template>
          <el-menu-item index="/opportunity-list">
            <span>商机列表</span>
          </el-menu-item>
          <el-menu-item index="/public-pool">
            <span>公海池</span>
          </el-menu-item>
        </el-sub-menu>

        <!-- 客户管理 -->
        <el-menu-item index="/customer-management">
          <el-icon><User /></el-icon>
          <span>客户管理</span>
        </el-menu-item>

        <!-- 资源管理 -->
        <el-sub-menu index="4">
          <template #title>
            <el-icon><Folder /></el-icon>
            <span>资源管理</span>
          </template>
          <el-menu-item index="/course-management">
            <span>课程管理</span>
          </el-menu-item>
          <el-menu-item index="/activity-management">
            <span>活动管理</span>
          </el-menu-item>
        </el-sub-menu>

        <!-- 系统管理 -->
        <el-sub-menu index="5">
          <template #title>
            <el-icon><Setting /></el-icon>
            <span>系统管理</span>
          </template>
          <el-menu-item index="/department-management">
            <span>部门管理</span>
          </el-menu-item>
          <el-menu-item index="/role-management">
            <span>角色管理</span>
          </el-menu-item>
          <el-menu-item index="/user-management">
            <span>用户管理</span>
          </el-menu-item>
          <el-menu-item index="/system-log">
            <span>系统日志</span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </aside>

    <!-- 主内容区 -->
    <div class="main-content">
      <!-- 顶部导航栏 -->
      <header class="main-header">
        <div class="header-left">
          <el-button
            type="text"
            @click="toggleSidebar"
            class="sidebar-toggle"
          >
            <el-icon><Menu /></el-icon>
          </el-button>
        </div>
        <div class="header-right">
          <el-dropdown>
            <span class="user-info">
              <el-avatar size="default" :src="userAvatar"></el-avatar>
              <span class="username">{{ username }}</span>
              <el-icon><ArrowDown /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="handleProfile">
                  <el-icon><User /></el-icon>
                  <span>个人中心</span>
                </el-dropdown-item>
                <el-dropdown-item @click="handleLogout">
                  <el-icon><SwitchButton /></el-icon>
                  <span>退出登录</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-button type="text" @click="handleRefresh">
            <el-icon><Refresh /></el-icon>
          </el-button>
        </div>
      </header>

      <!-- 内容区域 -->
      <div class="content-wrapper">
        <RouterView />
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 扩大用户信息显示两倍 */
.user-info {
  display: flex;
  align-items: center;
  gap: 20px; /* 增加间距 */
  padding: 16px 24px; /* 增加内边距 */
  cursor: pointer;
  height: 64px;
}

.username {
  font-size: 24px; /* 字体扩大两倍 */
  font-weight: 600;
  line-height: 1.5;
}

/* 直接通过size设置头像大小 */
:deep(.el-avatar) {
  width: 48px !important;
  height: 48px !important;
  font-size: 24px !important;
}

:deep(.el-icon) {
  font-size: 28px; /* 图标扩大两倍 */
}
</style>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  HomeFilled,
  Collection,
  TrendCharts,
  User,
  Folder,
  Setting,
  Menu,
  ArrowDown,
  Refresh,
  SwitchButton
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const sidebarCollapse = ref(false)

// 获取当前活动菜单
const activeMenu = computed(() => {
  const path = route.path
  return path || '/dashboard'
})

// 获取用户名
const username = computed(() => {
  return localStorage.getItem('username') || '管理员'
})

// 用户头像（从localStorage获取）
const userAvatar = computed(() => {
  try {
    const userInfoStr = localStorage.getItem('userInfo')
    if (userInfoStr) {
      const userInfo = JSON.parse(userInfoStr)
      // 返回用户信息中的image字段，如果不存在则使用默认头像
      return userInfo.image || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
    }
  } catch (error) {
    console.error('获取用户头像失败:', error)
  }
  // 默认头像
  return 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
})

// 切换侧边栏
const toggleSidebar = () => {
  sidebarCollapse.value = !sidebarCollapse.value
}

// 个人中心
const handleProfile = () => {
  router.push('/profile')
}

// 刷新页面
const handleRefresh = () => {
  window.location.reload()
}

// 退出登录
const handleLogout = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要退出登录吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    // 清除所有token和用户信息
    localStorage.removeItem('token')
    localStorage.removeItem('userInfo')
    localStorage.removeItem('username')
    localStorage.removeItem('userToken') // 兼容旧的token键名
    localStorage.removeItem('loginUser') // 清除可能存在的其他用户信息
    
    // 重定向到登录页
    router.push('/login')
    
    ElMessage.success('退出成功')
  } catch (error) {
    // 用户取消操作
  }
}

// 检查登录状态
const checkLoginStatus = () => {
  const token = localStorage.getItem('token') || localStorage.getItem('userToken')
  if (!token) {
    router.replace('/login')
  }
}

// 初始化
onMounted(() => {
  checkLoginStatus()
})
</script>

<style scoped>
.home-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* 侧边栏样式 */
.sidebar {
  width: 220px;
  height: 100%;
  background-color: #001529;
  transition: width 0.3s ease;
  overflow: hidden;
  flex-shrink: 0;
}

.sidebar.collapse {
  width: 64px;
}

.sidebar-header {
  padding: 20px 16px;
  background-color: #001529;
  border-bottom: 1px solid #1f2937;
}

.sidebar-header h3 {
  color: white;
  margin: 0;
  font-size: 18px;
  text-align: center;
}

.el-menu-vertical {
  height: calc(100% - 64px);
  border-right: none;
}

/* 主内容区样式 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #f0f2f5;
}

/* 顶部导航栏样式 */
.main-header {
  height: 64px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  flex-shrink: 0;
}

.sidebar-toggle {
  color: #606266;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.user-info:hover {
  background-color: #f5f5f5;
}

.username {
  font-size: 14px;
  color: #606266;
}

/* 内容包装器 */
.content-wrapper {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
</style>